<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v3.0.0-rc.0
* @link https://coreui.io
* Copyright (c) 2020 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->
<html lang="zh-CN">
<head>
    <base href="./">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
    <title>用户管理</title>
    <link rel="apple-touch-icon" sizes="57x57" href="assets/favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="assets/favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="assets/favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="assets/favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="assets/favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/favicon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="assets/favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <!-- Main styles for this application-->
    <link href="css/style.css" rel="stylesheet">
    <link href="vendors/@coreui/icons/css/free.min.css" rel="stylesheet">
    <!-- <link href="vendors/bootstrap/bootstrap.min.css" rel="stylesheet"> -->
    <link href="vendors/select2/select2.min.css" rel="stylesheet">
    <link href="vendors/select2/select2-coreui.min.css" rel="stylesheet">
    <link href="vendors/date-range-picker/date-range-picker.min.css" rel="stylesheet">
    <link href="vendors/bootstrap-submenu/bootstrap-submenu.min.css" rel="stylesheet">
    <link href="vendors/city-picker/css/city-picker.css" rel="stylesheet" type="text/css"/>
    <link href="vendors/toastr/toastr.min.css" rel="stylesheet">
</head>

<body class="c-app">

<div class="c-wrapper c-fixed-components">
    <header class="c-header c-header-light c-header-fixed c-header-with-subheader">
        <ul class="c-header-nav d-md-down-none">
            <li class="c-header-nav-item px-3"><a class="c-header-nav-link" href="#">Dashboard</a></li>
            <li class="c-header-nav-item px-3"><a class="c-header-nav-link" href="#">Users</a></li>
            <li class="c-header-nav-item px-3"><a class="c-header-nav-link" href="#">Settings</a></li>
        </ul>
        <ul class="c-header-nav ml-auto mr-4">
            <li class="c-header-nav-item d-md-down-none mx-2"><a class="c-header-nav-link" href="#">
                <svg class="c-icon">
                    <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-bell"></use>
                </svg>
            </a></li>
            <li class="c-header-nav-item d-md-down-none mx-2"><a class="c-header-nav-link" href="#">
                <svg class="c-icon">
                    <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-list-rich"></use>
                </svg>
            </a></li>
            <li class="c-header-nav-item d-md-down-none mx-2"><a class="c-header-nav-link" href="#">
                <svg class="c-icon">
                    <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-envelope-open"></use>
                </svg>
            </a></li>
            <li class="c-header-nav-item dropdown"><a class="c-header-nav-link" data-toggle="dropdown" href="#"
                                                      role="button" aria-haspopup="true" aria-expanded="false">
                <div class="c-avatar"><img class="c-avatar-img" src="assets/img/avatars/6.jpg" alt="user@email.com">
                </div>
            </a>
                <div class="dropdown-menu dropdown-menu-right pt-0">
                    <div class="dropdown-header bg-light py-2"><strong>Account</strong></div>
                    <a class="dropdown-item" href="#">
                        <svg class="c-icon mr-2">
                            <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-bell"></use>
                        </svg>
                        Updates<span class="badge badge-info ml-auto">42</span></a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-envelope-open"></use>
                    </svg>
                    Messages<span class="badge badge-success ml-auto">42</span></a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-task"></use>
                    </svg>
                    Tasks<span class="badge badge-danger ml-auto">42</span></a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-comment-square"></use>
                    </svg>
                    Comments<span class="badge badge-warning ml-auto">42</span></a>
                    <div class="dropdown-header bg-light py-2"><strong>Settings</strong></div>
                    <a class="dropdown-item" href="#">
                        <svg class="c-icon mr-2">
                            <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-user"></use>
                        </svg>
                        Profile</a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-settings"></use>
                    </svg>
                    Settings</a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-credit-card"></use>
                    </svg>
                    Payments<span class="badge badge-secondary ml-auto">42</span></a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-file"></use>
                    </svg>
                    Projects<span class="badge badge-primary ml-auto">42</span></a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">
                        <svg class="c-icon mr-2">
                            <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-lock-locked"></use>
                        </svg>
                        Lock Account</a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-account-logout"></use>
                    </svg>
                    Logout</a>
                </div>
            </li>
        </ul>
    </header>
    <div class="c-body">
        <main class="c-main">
            <div class="container-fluid">
                <div class="fade-in">
                    <div class="row">
                        <div class="col-2">
                            <div class="form-group mb-0">
<!--                                <label for="keyword" >关键词</label>-->
                                <input class="form-control" type="text" title="文本值" id="keyword">
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group  mb-0">
                                <div id="distpicker" class="row">
                                    <div class="form-group">
                                        <div style="position: relative;">
                                            <input id="city-picker" class="form-control" readonly type="text"
                                                   value="广东省/广州市/黄埔区" data-toggle="city-picker">
                                        </div>
                                    </div>
                                    <div class="form-group d-flex pl-1 align-items-center">
                                        <button class="btn btn-outline-primary btn-sm" id="city-destroy"
                                                type="button">确定
                                        </button>
                                        &nbsp;
                                        <button class="btn btn-outline-info btn-sm" id="city-reset"
                                                type="button">重置
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group  mb-0">
                                <!--                            <label for="years">年</label>-->
                                <input class="form-control date-range-picker" type="text" id="datetime"
                                       name="date-input" placeholder="时间段">
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group  mb-0">
                                <!--                            <label for="statistics">统计类型</label>-->
                                <select class="multiple-select-picker form-control-sm" title="请选择联系方式"
                                        multiple="" id="contactOptions">
                                    <option value="qq">QQ</option>
                                    <option value="email">EMail</option>
                                    <option value="mobile">手机</option>
                                    <option value="weixin">微信</option>
                                    <option value="dingding">钉钉</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="d-flex justify-content-center align-items-center">
                                <!--<span class="input-group-addon"  id="query"><a href="#"><i class="fa fa-search"></i></a></span>-->
                                <button class="btn btn-outline-primary" type="button" onclick="query()">
                                    <i class="c-icon cil-magnifying-glass"></i>
                                </button>

                            </div>
                        </div>
                    </div>
                    <div class="card" id="items-manage" v-cloak="">
                        <div class="card-header">
                            <i class="c-icon cil-applications"></i> <span class="lead">资源管理</span>
                            <div class="card-header-actions">
                                <a class="btn btn-ghost-info" @click="showItemForm(null)">
                                    <i class="c-icon cil-playlist-add"></i> &nbsp;新增
                                </a>
                                <a class="btn btn-ghost-danger" @click="confirmRemoveAll">
                                    <i class="c-icon cil-trash"></i> &nbsp;删除
                                </a>
                            </div>
                        </div>
                        <div class="card-body">

                            <table class="table table-responsive-sm table-bordered  table-hover  table-sm">
                                <thead>
                                <tr>
                                    <th style="width: 10px">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox"
                                                   data-action="do-check-all" name="checkAll">
                                            <label class="form-check-label" for="checkAll"></label>
                                        </div>
                                    </th>
                                    <th>头像</th>
                                    <th>用户名</th>
                                    <th>密码</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th style="width: 140px">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item, index) in pageItems" :key="item.id">
                                    <td>
                                        <div class="form-check form-check-inline">
                                            <!--  data-action="do-check"
                                                          v-bind:data-argument="startIndex+index" -->
                                            <input class="form-check-input" type="checkbox"
                                                   v-model="item.selected" v-bind:name="'item-' + item.index">
                                            {{ item.index }}
                                            <label class="form-check-label"
                                                   v-bind:for="'item-' + item.index"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <img v-bind:src="item.image"/>
                                    </td>
                                    <td>
                                        {{ item.username }}
                                    </td>
                                    <td>
                                        <!-- FIXIT 无效转有效有问题 -->
                                        <span v-if="item.enabled" class="badge badge-danger">无效</span>
                                        <span v-else class="badge badge-success ">有效</span>
                                    </td>
                                    <td>
                                        {{ dateTimeFormat(item.createDateTime)}}
                                    </td>
                                    <td>
                                        <a class="btn btn-outline-success btn-sm" @click="showDetails(item)">
                                            <i class="c-icon cil-description"></i>
                                            <!--<svg class="c-icon">
                                                <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-description">
                                                </use>
                                            </svg>-->
                                        </a>&nbsp;
                                        <a class="btn btn-outline-info btn-sm" @click="showItemForm(item)">
                                            <i class="c-icon cil-pencil"></i>
                                        </a>&nbsp;
                                        <a class="btn btn-outline-danger btn-sm" @click="confirmRemove(item)">
                                            <i class="c-icon cil-x"></i>
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <!-- /.modal #form-modal -->
                            <div class="modal " id="form-modal" data-backdrop="static" tabindex="-1"
                                 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-info modal-lg" role="document" id="item-modal">
                                    <div class="modal-content">
                                        <form id="item-form" class="needs-validation" novalidate="">
                                            <div class="modal-header">
                                                <h4 class="modal-title">Item信息</h4>
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                    <span aria-hidden="true">×</span>
                                                </button>
                                            </div>

                                            <div class="modal-body justify-content-center">

                                                <div class="container-fluid">
                                                    <!--<div class="row col-12">-->
                                                    <div class="form-group row">
                                                        <label
                                                                class="col-sm-3 col-form-label">头像</label>
                                                        <div class="col-sm-9">
                                                            <img v-bind:src="formItem.image">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="username" class="col-sm-3 col-form-label">用户名</label>
                                                        <div class="col-sm-9">
                                                            <!-- pattern="^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$" -->
                                                            <input class="form-control" type="text"
                                                                   id="username" placeholder="用户名"
                                                                   v-model="formItem.username" required=""
                                                                   pattern="^([-a-zA-Z0-9_\u4e00-\u9fa5]{2,16})$">
                                                            <small class="form-text text-muted">
                                                                用户名规则：必须以英文字母或中文字符开头，2~16个字符（中文、字母、数字、_或-）
                                                            </small>
                                                            <em class="error invalid-feedback">用户名不符合规则</em>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="password" class="col-sm-3 col-form-label">密码</label>
                                                        <div class="col-sm-9">
                                                            <input class="form-control" type="text"
                                                                   id="password" placeholder="密码"
                                                                   v-model="formItem.password" required=""
                                                                  >
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="status-active"
                                                               class="col-sm-3 col-form-label">状态</label>
                                                        <div class="col-sm-9">
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                       v-model="formItem.enabled"
                                                                       name="inlineRadioOptions"
                                                                       id="status-active" value=true>
                                                                <label class="form-check-label"
                                                                       for="status-active">激活</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                       v-model="formItem.enabled"
                                                                       name="inlineRadioOptions"
                                                                       id="status-forbidden" value=false>
                                                                <label class="form-check-label"
                                                                       for="status-forbidden">禁用</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group row">
                                                        <label for="createTime" class="col-sm-3 col-form-label">创建时间</label>
                                                        <div class="col-sm-9">
                                                            <input class="form-control" type="text"
                                                                   id="createTime"
                                                                   v-model="formItem.createTime"
                                                                   placeholder="日期时间">
                                                        </div>
                                                    </div>


                                                </div>

                                                <!--</div>-->
                                            </div>

                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-info" @click="saveItem">
                                                    保存
                                                </button>
                                                <button type="button" data-dismiss="modal"
                                                        class="btn btn-secondary">
                                                    取消
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <!-- /.modal #confirm-modal -->
                            <div class="modal " id="confirm-modal" data-backdrop="static" tabindex="-1"
                                 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog  modal-danger" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="confirm-modal-title">危险</h4>
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="modal-body font-weight-bold" id="confirm-modal-content">
                                            记录删除后将无法恢复!确定要删除吗？
                                        </div>
                                        <div class="modal-footer">
                                            <input type="hidden" id="itemIds">
                                            <button type="button" class="btn btn-danger" data-dismiss="modal"
                                                    @click="removeItems">
                                                确定
                                            </button>
                                            <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">
                                                取消
                                            </button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <!-- /.modal #detail-modal -->
                            <div class="modal " id="detail-modal" data-backdrop="static" tabindex="-1"
                                 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog  modal-success  modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">详细信息</h4>
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <table>
                                                <thead>
                                                <tr>
                                                    <th>属性</th>
                                                    <th>值</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="(value, key) in detailItem">
                                                    <td>

                                                        {{ key }}
                                                    </td>
                                                    <td>

                                                        {{ value }}
                                                    </td>

                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-success" data-dismiss="modal">
                                                确定
                                            </button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row justify-content-between">
                                <div class="col-lg-2 col-sm-6">
                                    <div class="form-group form-inline">
                                        显示&nbsp;
                                        <select class="custom-select" v-model="paging.size">
                                            <option v-for="option in options.paging.pageSizeList"
                                                    v-bind:value="option.value">

                                                {{ option.text }}
                                            </option>
                                        </select>
                                        &nbsp;项/页
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <nav aria-label="Page navigation">
                                        <ul class="pagination">
                                            <li class="page-item" v-for="link in pageLinks"
                                                v-bind:class="link==paging.offset+1 ? 'active' : ''">
                                                <a v-if="link!='...'" class="page-link"
                                                   v-on:click="paging.offset = link-1">

                                                    {{ link }}</a>
                                                <a v-else="" class="page-link">

                                                    {{ link }} </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer class="c-footer">
            <div><a href="http://www.gzcc.cn">GCC</a> © 2020 HeWenhai.</div>
            <div class="ml-auto">Powered by&nbsp;<a href="https://coreui.io/">CoreUI</a></div>
        </footer>
    </div>
</div>
<!-- CoreUI and necessary plugins-->
<script src="vendors/@coreui/coreui/js/coreui.bundle.min.js"></script>
<!--[if IE]><!-->
<script src="vendors/@coreui/icons/js/svgxuse.min.js"></script>
<!--<![endif]-->

<script src="vendors/jquery/jquery-3.4.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.min.js"></script>
<script src="vendors/moment/moment.min.js"></script>
<script src="vendors/lodash/lodash.min.js"></script>

<script src="vendors/toastr/toastr.min.js"></script>
<script src="vendors/select2/select2.min.js"></script>
<script src="vendors/date-range-picker/date-range-picker.js"></script>
<script src="vendors/bootstrap-submenu/bootstrap-submenu.min.js"></script>
<script src="vendors/city-picker/js/city-picker.data.js"></script>
<script src="vendors/city-picker/js/city-picker.js"></script>

<script src="vendors/axious/axios.min.js"></script>
<script src="vendors/vue/vue.js"></script>
<script src="js/users.js"></script>

</body>
</html>